<!-- 拦截推演沙盘组件 -->
<template>
  <div class="interception-simulation">
    <!-- 沙盘标题 -->
    <div class="simulation-header">
      <h2 class="simulation-title">
        <el-icon class="title-icon"><Aim /></el-icon>
        拦截推演沙盘
      </h2>
      <div class="simulation-controls">
        <el-button-group size="small">
          <el-button @click="toggle2D3D">
            <el-icon v-if="is3DMode"><View /></el-icon>
            <el-icon v-else><Coordinate /></el-icon>
            {{ is3DMode ? '2D视图' : '3D视图' }}
          </el-button>
          <el-button @click="resetView">
            <el-icon><RefreshRight /></el-icon>
            重置视图
          </el-button>
          <el-button 
            type="primary" 
            @click="startSimulation" 
            :disabled="!selectedThreat || isSimulating"
          >
            <el-icon><VideoPlay /></el-icon>
            开始推演
          </el-button>
          <el-button 
            type="danger" 
            @click="stopSimulation" 
            :disabled="!isSimulating"
          >
            <el-icon><VideoPause /></el-icon>
            停止推演
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 地图容器 -->
    <div class="map-container">
      <!-- 2D地图 -->
      <div v-show="!is3DMode" ref="map2DRef" class="map-2d"></div>
      <!-- 3D地图 -->
      <div v-show="is3DMode" ref="map3DRef" class="map-3d"></div>
      
      <!-- 地图控制面板 -->
      <div class="map-controls">
        <el-card class="control-panel" :body-style="{ padding: '1vh' }">
          <div class="control-section">
            <h4>图层控制</h4>
            <el-checkbox-group v-model="activeLayers" size="small">
              <el-checkbox label="trajectories">导弹轨迹</el-checkbox>
              <el-checkbox label="interceptionZones">拦截区域</el-checkbox>
              <el-checkbox label="threats">威胁目标</el-checkbox>
              <el-checkbox label="defenses">防御设施</el-checkbox>
            </el-checkbox-group>
          </div>
          
          <div class="control-section">
            <h4>推演参数</h4>
            <div class="param-item">
              <label>时间倍速:</label>
              <el-slider 
                v-model="timeScale" 
                :min="1" 
                :max="10" 
                :step="1"
                :show-tooltip="false"
                size="small"
              />
              <span class="param-value">{{ timeScale }}x</span>
            </div>
            <div class="param-item">
              <label>拦截概率:</label>
              <el-slider 
                v-model="interceptionProb" 
                :min="0" 
                :max="100" 
                :step="5"
                :show-tooltip="false"
                size="small"
              />
              <span class="param-value">{{ interceptionProb }}%</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 推演信息面板 -->
    <div class="simulation-info">
      <el-tabs v-model="activeInfoTab" size="small">
        <!-- 轨迹预测 -->
        <el-tab-pane label="轨迹预测" name="trajectory">
          <div class="trajectory-info">
            <div v-if="!selectedThreat" class="no-selection">
              <el-icon class="no-data-icon"><Warning /></el-icon>
              <p>请先选择威胁目标</p>
            </div>
            <div v-else class="trajectory-details">
              <div class="target-info">
                <h4>目标信息</h4>
                <div class="info-grid">
                  <div class="info-item">
                    <span class="label">目标ID:</span>
                    <span class="value">{{ selectedThreat.id }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">类型:</span>
                    <span class="value">{{ selectedThreat.type }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">威胁等级:</span>
                    <span class="value threat-level" :class="getThreatClass(selectedThreat.threat)">
                      {{ (selectedThreat.threat * 100).toFixed(0) }}%
                    </span>
                  </div>
                  <div class="info-item">
                    <span class="label">距离:</span>
                    <span class="value">{{ selectedThreat.distance }}km</span>
                  </div>
                </div>
              </div>
              
              <div class="prediction-info">
                <h4>预测结果</h4>
                <div class="prediction-grid">
                  <div class="prediction-item">
                    <div class="prediction-label">到达时间</div>
                    <div class="prediction-value">{{ predictedArrivalTime }}</div>
                  </div>
                  <div class="prediction-item">
                    <div class="prediction-label">拦截窗口</div>
                    <div class="prediction-value">{{ interceptionWindow }}</div>
                  </div>
                  <div class="prediction-item">
                    <div class="prediction-label">推荐拦截点</div>
                    <div class="prediction-value">{{ recommendedInterceptionPoint }}</div>
                  </div>
                  <div class="prediction-item">
                    <div class="prediction-label">成功概率</div>
                    <div class="prediction-value success-rate">{{ successProbability }}%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 拦截区域 -->
        <el-tab-pane label="拦截区域" name="zones">
          <div class="zones-info">
            <div class="zones-list">
              <div 
                v-for="zone in interceptionZones" 
                :key="zone.id"
                class="zone-item"
                :class="{ active: zone.status === 'active' }"
              >
                <div class="zone-header">
                  <div class="zone-id">{{ zone.id }}</div>
                  <div class="zone-status" :class="zone.status">
                    <el-icon v-if="zone.status === 'active'"><CircleCheck /></el-icon>
                    <el-icon v-else><CircleClose /></el-icon>
                    {{ zone.status === 'active' ? '激活' : '离线' }}
                  </div>
                </div>
                
                <div class="zone-details">
                  <div class="detail-row">
                    <span class="label">覆盖范围:</span>
                    <span class="value">{{ zone.radius }}km</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">覆盖率:</span>
                    <span class="value">{{ (zone.coverage * 100).toFixed(0) }}%</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">坐标:</span>
                    <span class="value">{{ zone.center.lat.toFixed(3) }}°, {{ zone.center.lng.toFixed(3) }}°</span>
                  </div>
                </div>
                
                <div class="zone-actions">
                  <el-button size="small" @click="toggleZone(zone)">
                    {{ zone.status === 'active' ? '停用' : '激活' }}
                  </el-button>
                  <el-button size="small" @click="configureZone(zone)">配置</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 推演日志 -->
        <el-tab-pane label="推演日志" name="logs">
          <div class="simulation-logs">
            <div class="logs-header">
              <el-button size="small" @click="clearLogs">
                <el-icon><Delete /></el-icon>
                清空日志
              </el-button>
            </div>
            <div class="logs-list">
              <div 
                v-for="log in simulationLogs" 
                :key="log.id"
                class="log-item"
                :class="log.level"
              >
                <div class="log-time">{{ log.timestamp }}</div>
                <div class="log-content">{{ log.message }}</div>
                <div class="log-level">{{ log.level }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 推演结果弹窗 -->
    <el-dialog
      v-model="showResultDialog"
      title="推演结果"
      width="60vw"
      :close-on-click-modal="false"
    >
      <div class="simulation-result">
        <div class="result-summary">
          <div class="result-icon" :class="simulationResult.success ? 'success' : 'failure'">
            <el-icon v-if="simulationResult.success"><SuccessFilled /></el-icon>
            <el-icon v-else><CircleCloseFilled /></el-icon>
          </div>
          <h3>{{ simulationResult.success ? '拦截成功' : '拦截失败' }}</h3>
          <p>{{ simulationResult.description }}</p>
        </div>
        
        <div class="result-details">
          <div class="detail-section">
            <h4>拦截数据</h4>
            <div class="data-grid">
              <div class="data-item">
                <span class="label">拦截时间:</span>
                <span class="value">{{ simulationResult.interceptionTime }}</span>
              </div>
              <div class="data-item">
                <span class="label">拦截距离:</span>
                <span class="value">{{ simulationResult.interceptionDistance }}km</span>
              </div>
              <div class="data-item">
                <span class="label">拦截高度:</span>
                <span class="value">{{ simulationResult.interceptionAltitude }}m</span>
              </div>
              <div class="data-item">
                <span class="label">剩余威胁:</span>
                <span class="value">{{ simulationResult.remainingThreats }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="showResultDialog = false">关闭</el-button>
        <el-button type="primary" @click="exportResult">导出结果</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Aim,
  View,
  Coordinate,
  RefreshRight,
  VideoPlay,
  VideoPause,
  Warning,
  CircleCheck,
  CircleClose,
  Delete,
  SuccessFilled,
  CircleCloseFilled
} from '@element-plus/icons-vue'

// 定义props
const props = defineProps({
  selectedThreat: {
    type: Object,
    default: null
  },
  missileTrajectories: {
    type: Array,
    required: true
  },
  interceptionZones: {
    type: Array,
    required: true
  }
})

// 定义事件
const emit = defineEmits(['simulationStart', 'simulationStop'])

// 响应式数据
const is3DMode = ref(false)
const isSimulating = ref(false)
const activeInfoTab = ref('trajectory')
const activeLayers = ref(['trajectories', 'interceptionZones', 'threats', 'defenses'])
const timeScale = ref(1)
const interceptionProb = ref(85)
const showResultDialog = ref(false)

// DOM引用
const map2DRef = ref(null)
const map3DRef = ref(null)

// 地图实例
let map2D = null
let map3D = null

// 推演日志
const simulationLogs = ref([
  { id: 1, timestamp: '14:30:15', message: '推演系统已初始化', level: 'info' },
  { id: 2, timestamp: '14:30:16', message: '载入威胁目标数据', level: 'info' },
  { id: 3, timestamp: '14:30:17', message: '拦截区域配置完成', level: 'success' }
])

// 推演结果
const simulationResult = reactive({
  success: true,
  description: '目标已被成功拦截，威胁已解除',
  interceptionTime: '120秒',
  interceptionDistance: '45km',
  interceptionAltitude: '8500m',
  remainingThreats: 0
})

// 计算属性
const predictedArrivalTime = computed(() => {
  if (!props.selectedThreat) return '--'
  const time = Math.round(props.selectedThreat.distance / (props.selectedThreat.speed || 500) * 60)
  return `${time}分钟`
})

const interceptionWindow = computed(() => {
  if (!props.selectedThreat) return '--'
  return '30-90秒'
})

const recommendedInterceptionPoint = computed(() => {
  if (!props.selectedThreat) return '--'
  return `距离目标${Math.round(props.selectedThreat.distance * 0.3)}km`
})

const successProbability = computed(() => {
  if (!props.selectedThreat) return 0
  const baseProbability = interceptionProb.value
  const threatModifier = (1 - props.selectedThreat.threat) * 20
  return Math.min(95, Math.max(5, baseProbability + threatModifier))
})

// 威胁等级分类
const getThreatClass = (level) => {
  if (level >= 0.7) return 'high'
  if (level >= 0.4) return 'medium'
  return 'low'
}

// 视图控制
const toggle2D3D = () => {
  is3DMode.value = !is3DMode.value
  nextTick(() => {
    if (is3DMode.value) {
      init3DMap()
    } else {
      init2DMap()
    }
  })
}

const resetView = () => {
  if (is3DMode.value && map3D) {
    // 重置3D视图
    ElMessage.info('3D视图已重置')
  } else if (map2D) {
    // 重置2D视图
    ElMessage.info('2D视图已重置')
  }
}

// 推演控制
const startSimulation = () => {
  if (!props.selectedThreat) {
    ElMessage.warning('请先选择威胁目标')
    return
  }
  
  isSimulating.value = true
  emit('simulationStart')
  
  // 添加推演日志
  addLog('开始推演拦截目标: ' + props.selectedThreat.id, 'info')
  addLog('预计拦截成功率: ' + successProbability.value + '%', 'info')
  
  // 模拟推演过程
  setTimeout(() => {
    runSimulation()
  }, 2000)
}

const stopSimulation = () => {
  isSimulating.value = false
  emit('simulationStop')
  addLog('推演已停止', 'warning')
}

// 运行推演
const runSimulation = () => {
  const success = Math.random() * 100 < successProbability.value
  
  simulationResult.success = success
  simulationResult.description = success 
    ? '目标已被成功拦截，威胁已解除'
    : '拦截失败，目标突破防线'
  
  if (success) {
    addLog('拦截成功！目标已被摧毁', 'success')
  } else {
    addLog('拦截失败！目标突破防线', 'error')
  }
  
  isSimulating.value = false
  showResultDialog.value = true
}

// 拦截区域控制
const toggleZone = (zone) => {
  zone.status = zone.status === 'active' ? 'inactive' : 'active'
  addLog(`拦截区域${zone.id}状态变更为: ${zone.status}`, 'info')
}

const configureZone = (zone) => {
  ElMessage.info(`配置拦截区域 ${zone.id}`)
}

// 日志管理
const addLog = (message, level = 'info') => {
  const newLog = {
    id: Date.now(),
    timestamp: new Date().toLocaleTimeString(),
    message,
    level
  }
  simulationLogs.value.unshift(newLog)
  
  // 限制日志数量
  if (simulationLogs.value.length > 100) {
    simulationLogs.value = simulationLogs.value.slice(0, 100)
  }
}

const clearLogs = () => {
  simulationLogs.value = []
  ElMessage.success('日志已清空')
}

// 结果导出
const exportResult = () => {
  const resultData = {
    timestamp: new Date().toISOString(),
    selectedThreat: props.selectedThreat,
    result: simulationResult,
    logs: simulationLogs.value
  }
  
  const dataStr = JSON.stringify(resultData, null, 2)
  const blob = new Blob([dataStr], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  
  const link = document.createElement('a')
  link.href = url
  link.download = `simulation_result_${Date.now()}.json`
  link.click()
  
  URL.revokeObjectURL(url)
  ElMessage.success('推演结果已导出')
}

// 地图初始化
const init2DMap = () => {
  if (!map2DRef.value) return
  // 初始化OpenLayers 2D地图
  addLog('2D地图已加载', 'info')
}

const init3DMap = () => {
  if (!map3DRef.value) return
  // 初始化Cesium 3D地图
  addLog('3D地图已加载', 'info')
}

// 监听选中威胁变化
watch(() => props.selectedThreat, (newThreat) => {
  if (newThreat) {
    addLog(`已选择威胁目标: ${newThreat.id} (${newThreat.type})`, 'info')
  }
})

// 生命周期
onMounted(() => {
  nextTick(() => {
    init2DMap()
  })
})
</script>

<style scoped>
.interception-simulation {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0a0f1b;
  padding: 1.5vh 1vw;
}

/* 沙盘标题 */
.simulation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid #2d3a4b;
}

.simulation-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #bfcbd9;
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.title-icon {
  font-size: 1.3rem;
  color: #ff4757;
}

/* 地图容器 */
.map-container {
  flex: 1;
  position: relative;
  background: #000;
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b;
  overflow: hidden;
}

.map-2d,
.map-3d {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #0a0f1b 0%, #1a2332 50%, #0a0f1b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8591a3;
  font-size: 1.2rem;
}

.map-2d::before,
.map-3d::before {
  content: '地图加载中...';
}

/* 地图控制面板 */
.map-controls {
  position: absolute;
  top: 1vh;
  right: 1vw;
  z-index: 10;
}

.control-panel {
  width: 20vw;
  background: rgba(31, 45, 61, 0.95) !important;
  border: 1px solid #2d3a4b !important;
}

.control-section {
  margin-bottom: 2vh;
}

.control-section:last-child {
  margin-bottom: 0;
}

.control-section h4 {
  margin: 0 0 1vh 0;
  font-size: 0.9rem;
  color: #bfcbd9;
}

.param-item {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 0.5vw;
  margin-bottom: 1vh;
}

.param-item label {
  font-size: 0.8rem;
  color: #8591a3;
}

.param-value {
  font-size: 0.8rem;
  color: #409EFF;
  font-weight: bold;
  text-align: right;
  min-width: 2vw;
}

/* 推演信息面板 */
.simulation-info {
  height: 30vh;
  background: rgba(31, 45, 61, 0.8);
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b;
  margin-top: 1vh;
  overflow: hidden;
}

/* 轨迹信息 */
.trajectory-info {
  height: 26vh;
  padding: 1vh;
  overflow-y: auto;
}

.no-selection {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8591a3;
}

.no-data-icon {
  font-size: 3rem;
  margin-bottom: 1vh;
  color: #5a6572;
}

.trajectory-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
  height: 100%;
}

.target-info,
.prediction-info {
  background: rgba(38, 52, 69, 0.5);
  border-radius: 0.6vh;
  padding: 1.5vh 1vw;
  border: 1px solid #2d3a4b;
}

.target-info h4,
.prediction-info h4 {
  margin: 0 0 1.5vh 0;
  font-size: 1rem;
  color: #bfcbd9;
  text-align: center;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vh 1vw;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-item .label {
  font-size: 0.8rem;
  color: #8591a3;
}

.info-item .value {
  font-size: 0.85rem;
  color: #bfcbd9;
  font-weight: 500;
}

.threat-level {
  padding: 0.2vh 0.5vw;
  border-radius: 0.3vh;
  font-weight: bold;
}

.threat-level.high {
  background: rgba(255, 71, 87, 0.2);
  color: #ff4757;
  border: 1px solid #ff4757;
}

.threat-level.medium {
  background: rgba(255, 165, 2, 0.2);
  color: #ffa502;
  border: 1px solid #ffa502;
}

.threat-level.low {
  background: rgba(46, 213, 115, 0.2);
  color: #2ed573;
  border: 1px solid #2ed573;
}

.prediction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5vh 1vw;
}

.prediction-item {
  text-align: center;
}

.prediction-label {
  font-size: 0.75rem;
  color: #8591a3;
  margin-bottom: 0.5vh;
}

.prediction-value {
  font-size: 0.9rem;
  color: #bfcbd9;
  font-weight: bold;
}

.success-rate {
  color: #2ed573;
}

/* 拦截区域信息 */
.zones-info {
  height: 26vh;
  padding: 1vh;
  overflow-y: auto;
}

.zones-list {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.zone-item {
  background: rgba(38, 52, 69, 0.5);
  border: 1px solid #2d3a4b;
  border-radius: 0.6vh;
  padding: 1.5vh 1vw;
  transition: all 0.3s ease;
}

.zone-item.active {
  border-color: #2ed573;
  box-shadow: 0 0 0.5vh rgba(46, 213, 115, 0.2);
}

.zone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
}

.zone-id {
  font-size: 1rem;
  font-weight: bold;
  color: #409EFF;
}

.zone-status {
  display: flex;
  align-items: center;
  gap: 0.3vw;
  font-size: 0.8rem;
  padding: 0.2vh 0.8vw;
  border-radius: 0.3vh;
}

.zone-status.active {
  background: rgba(46, 213, 115, 0.2);
  color: #2ed573;
  border: 1px solid #2ed573;
}

.zone-status.inactive {
  background: rgba(145, 147, 153, 0.2);
  color: #909399;
  border: 1px solid #909399;
}

.zone-details {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1vw;
  margin-bottom: 1vh;
}

.detail-row {
  display: flex;
  flex-direction: column;
  gap: 0.3vh;
}

.detail-row .label {
  font-size: 0.75rem;
  color: #8591a3;
}

.detail-row .value {
  font-size: 0.85rem;
  color: #bfcbd9;
  font-weight: 500;
}

.zone-actions {
  display: flex;
  gap: 0.5vw;
}

/* 推演日志 */
.simulation-logs {
  height: 26vh;
  display: flex;
  flex-direction: column;
}

.logs-header {
  padding: 1vh;
  border-bottom: 1px solid #2d3a4b;
  display: flex;
  justify-content: flex-end;
}

.logs-list {
  flex: 1;
  overflow-y: auto;
  padding: 1vh;
}

.log-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1vw;
  align-items: center;
  padding: 0.8vh 1vw;
  margin-bottom: 0.5vh;
  border-radius: 0.4vh;
  border-left: 3px solid;
  background: rgba(38, 52, 69, 0.3);
}

.log-item.info {
  border-left-color: #409EFF;
}

.log-item.success {
  border-left-color: #2ed573;
}

.log-item.warning {
  border-left-color: #ffa502;
}

.log-item.error {
  border-left-color: #ff4757;
}

.log-time {
  font-size: 0.75rem;
  color: #8591a3;
  font-family: monospace;
}

.log-content {
  font-size: 0.8rem;
  color: #bfcbd9;
}

.log-level {
  font-size: 0.7rem;
  padding: 0.2vh 0.5vw;
  border-radius: 0.2vh;
  text-transform: uppercase;
  font-weight: bold;
}

.log-item.info .log-level {
  background: rgba(64, 158, 255, 0.2);
  color: #409EFF;
}

.log-item.success .log-level {
  background: rgba(46, 213, 115, 0.2);
  color: #2ed573;
}

.log-item.warning .log-level {
  background: rgba(255, 165, 2, 0.2);
  color: #ffa502;
}

.log-item.error .log-level {
  background: rgba(255, 71, 87, 0.2);
  color: #ff4757;
}

/* 推演结果弹窗 */
.simulation-result {
  text-align: center;
}

.result-summary {
  margin-bottom: 3vh;
}

.result-icon {
  font-size: 4rem;
  margin-bottom: 2vh;
}

.result-icon.success {
  color: #2ed573;
}

.result-icon.failure {
  color: #ff4757;
}

.simulation-result h3 {
  margin: 1vh 0;
  font-size: 1.5rem;
  color: #bfcbd9;
}

.simulation-result p {
  color: #8591a3;
  font-size: 1rem;
}

.result-details {
  text-align: left;
}

.detail-section h4 {
  margin: 0 0 1.5vh 0;
  font-size: 1.1rem;
  color: #bfcbd9;
  text-align: center;
}

.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5vh 2vw;
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 1.5vw;
  background: rgba(38, 52, 69, 0.5);
  border-radius: 0.5vh;
  border: 1px solid #2d3a4b;
}

.data-item .label {
  font-size: 0.9rem;
  color: #8591a3;
}

.data-item .value {
  font-size: 0.95rem;
  color: #bfcbd9;
  font-weight: bold;
}

/* Element Plus 组件样式覆盖 */
.interception-simulation :deep(.el-button) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
  font-size: 0.8rem;
}

.interception-simulation :deep(.el-button:hover) {
  background: #2d3a4b !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}

.interception-simulation :deep(.el-button--primary) {
  background: #ff4757 !important;
  border-color: #ff4757 !important;
  color: #ffffff !important;
}

.interception-simulation :deep(.el-button--danger) {
  background: #ff4757 !important;
  border-color: #ff4757 !important;
  color: #ffffff !important;
}

.interception-simulation :deep(.el-button:disabled) {
  background: #1a2332 !important;
  border-color: #2d3a4b !important;
  color: #5a6572 !important;
}

.interception-simulation :deep(.el-card) {
  background: rgba(31, 45, 61, 0.95) !important;
  border-color: #2d3a4b !important;
}

.interception-simulation :deep(.el-tabs__header) {
  margin: 0;
  background: rgba(26, 35, 50, 0.8);
  border-bottom: 1px solid #2d3a4b;
}

.interception-simulation :deep(.el-tabs__item) {
  color: #8591a3 !important;
  font-size: 0.85rem;
}

.interception-simulation :deep(.el-tabs__item.is-active) {
  color: #409EFF !important;
}

.interception-simulation :deep(.el-tabs__active-bar) {
  background-color: #409EFF !important;
}

.interception-simulation :deep(.el-checkbox-group) {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.interception-simulation :deep(.el-checkbox__label) {
  color: #bfcbd9 !important;
  font-size: 0.8rem;
}

.interception-simulation :deep(.el-slider__runway) {
  background: #2d3a4b !important;
}

.interception-simulation :deep(.el-slider__bar) {
  background: #409EFF !important;
}

.interception-simulation :deep(.el-slider__button) {
  background: #409EFF !important;
  border-color: #409EFF !important;
}

.interception-simulation :deep(.el-dialog) {
  background: #1f2d3d !important;
  border: 1px solid #2d3a4b !important;
}

.interception-simulation :deep(.el-dialog__header) {
  background: #1a2332 !important;
  border-bottom: 1px solid #2d3a4b !important;
}

.interception-simulation :deep(.el-dialog__title) {
  color: #bfcbd9 !important;
}

.interception-simulation :deep(.el-dialog__body) {
  background: #1f2d3d !important;
  color: #bfcbd9 !important;
}

/* 滚动条样式 */
.trajectory-info::-webkit-scrollbar,
.zones-info::-webkit-scrollbar,
.logs-list::-webkit-scrollbar {
  width: 6px;
}

.trajectory-info::-webkit-scrollbar-track,
.zones-info::-webkit-scrollbar-track,
.logs-list::-webkit-scrollbar-track {
  background: #1f2d3d;
  border-radius: 3px;
}

.trajectory-info::-webkit-scrollbar-thumb,
.zones-info::-webkit-scrollbar-thumb,
.logs-list::-webkit-scrollbar-thumb {
  background: #2d3a4b;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.trajectory-info::-webkit-scrollbar-thumb:hover,
.zones-info::-webkit-scrollbar-thumb:hover,
.logs-list::-webkit-scrollbar-thumb:hover {
  background: #409EFF;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .control-panel {
    width: 25vw;
  }
  
  .trajectory-details {
    grid-template-columns: 1fr;
    gap: 1vh;
  }
  
  .prediction-grid,
  .data-grid {
    grid-template-columns: 1fr;
    gap: 1vh;
  }
}

@media (max-width: 1200px) {
  .simulation-header {
    flex-direction: column;
    gap: 1vh;
    align-items: flex-start;
  }
  
  .zone-details {
    grid-template-columns: 1fr;
    gap: 0.5vh;
  }
}

@media (max-width: 768px) {
  .control-panel {
    width: 35vw;
  }
  
  .param-item {
    grid-template-columns: 1fr;
    gap: 0.5vh;
    text-align: center;
  }
  
  .log-item {
    grid-template-columns: 1fr;
    gap: 0.5vh;
    text-align: center;
  }
}
</style>